<template>
  <el-config-provider :size="size" :locale="$i18n.locale=='zh' ? zhCn :en">
    <div class="container">
      <el-container>
        <!-- 左边aside -->
        <el-aside>
          <ThreeMenu :is-collapse="isCollapse"></ThreeMenu>
        </el-aside>
        <el-container>
          <el-header>
            <div class="header_top">
              <!-- 面包屑 -->
              <HeaderBreadcrumb @change-collapse='isCollapse = $event'></HeaderBreadcrumb>
              <div class="header_righr">
                <span>
                  <!-- 全屏组件 -->
                  <ScreenFull></ScreenFull>
                </span>
                <el-divider direction="vertical" />
                <span>
                  <!-- 切换大小 -->
                  <SizeChange @change-size="size = $event"></SizeChange>
                </span>
                <el-divider direction="vertical" />
                <span>
                  <!-- 国际化 -->
                  <Internationalzation></Internationalzation>
                </span>
                <el-divider direction="vertical" />
                <span>
                  <!-- 用户头像 -->
                  <UserInfo></UserInfo>
                </span>
              </div>
            </div>
            <!-- 标签页 -->
            <HerderTags></HerderTags>
          </el-header>
          <el-main>
            <RouterView />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ThreeMenu from "@/components/navigation/ThreeMenu.vue";//树形菜单
import HeaderBreadcrumb from "@/components/navigation/HeaderBreadcrumb.vue";//面包屑组件
import HerderTags from "@/components/navigation/HerderTags.vue";//标签页组件
import ScreenFull from "@/components/screenfull/ScreenFull.vue";//全屏组件
import SizeChange from "@/components/sizechange/SizeChange.vue";//切换大小
import Internationalzation from "@/components/internationalization/Internationalzation.vue";//国际化语言切换
import UserInfo from "@/components/userheader/UserHeader.vue";//用户头像
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'

const isCollapse = ref(false)

const size = ref(localStorage.getItem('size') || 'default')
</script>

<style lang="less" scoped>
.container {
  .el-container {
    height: 100vh;
  }

  .el-aside {
    background-color: #304156 !important;
    height: 100vh;
    width: auto;
  }

  .el-header {
    background-color: #fff;
    height: 110px;
    padding: 0;
    cursor: pointer;

    .header_top {
      height: 60px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header_righr{
      display: flex;
      align-items: center;
    }
  }

  .el-main {
    height: calc(100vh - 110px);
    padding: 0  20px !important;
  }
}
</style>